<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{register.title}"></title>
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet"/>



    <style>

        .register-link {
            margin-top: 10px;
            text-align: center;
        }
        body > article > form{
            flex-basis: 300px;
            width: 500px;
        }

    </style>
</head>
<body>
    <header>
        <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
        <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">
    </header>
    <article>
        <section><img th:src="@{/assets/images/pic.png}"></section>
        <form id="registerForm">
            <!-- 手机号 -->
            <div class="form-group">
                <span th:text="#{register.mobile}">手机号</span>
                <input type="tel" id="mobile" name="mobile" class="form-control"
                       th:placeholder="#{register.mobile.plch}" required>
            </div>

            <!-- 验证码 -->
            <div class="form-group">
                <span th:text="#{register.code}">验证码</span>
                <div style="display: flex; gap: 10px;">
                    <input type="text" id="code" name="code" class="form-control"
                           th:placeholder="#{register.code.plch}" required>
                    <button type="button" id="sendCodeBtn" class="btn btn-secondary" onclick="sendCode()">
                        获取验证码
                    </button>
                </div>
            </div>

            <!-- 用户昵称 -->
            <div class="form-group">
                <span th:text="#{register.nickname}">用户昵称</span>
                <input type="text" id="nickname" name="nickname" class="form-control"
                       th:placeholder="#{register.nickname.plch}" required>
            </div>

            <!-- 密码 -->
            <div class="form-group">
                <span th:text="#{register.password}">密码</span>
                <input type="password" id="password" name="password" class="form-control"
                       th:placeholder="#{register.password.plch}" required>
            </div>

            <!-- 注册按钮 -->
            <button type="submit" class="btn btn-success btn-group-lg" th:text="#{register.submit}">注册</button>

            <!-- 跳转登录 -->
            <div class="register-link">
                <a th:href="@{/login/login}" th:text="#{register.login}">已有账号？登录</a>
            </div>
        </form>
    </article>



    <script th:inline="javascript">
        var countdown = 60;
        var timer = null;

        // 发送验证码
        function sendCode() {
            const mobile = $("#mobile").val();
            if (!/^1[3-9]\d{9}$/.test(mobile)) {
                message("请输入正确的手机号码");
                return;
            }
            // 禁用按钮并开始倒计时
            $("#sendCodeBtn").prop("disabled", true);
            startCountdown();

            // 发送请求
            $.post("/login/sendCode", {mobile: mobile}, function(res) {
                if (!res.success) {
                    message(res.message);
                    clearCountdown();
                }
            }).fail(function() {
                message("发送验证码失败");
                clearCountdown();
            });
        }
        // 开始倒计时
        function startCountdown() {
            clearCountdown();
            countdown = 60;
            updateCountdownText();

            timer = setInterval(function() {
                countdown--;
                updateCountdownText();

                if (countdown <= 0) {
                    clearCountdown();
                }
            }, 1000);
        }

        // 更新倒计时文本
      /*  function updateCountdownText() {
            const btn = $("#sendCodeBtn");
            if (countdown > 0) {
                btn.text(`重新发送(${countdown}s)`);
            } else {
                btn.text(btn.data("original-text"));
                btn.prop("disabled", false);
            }
        }*/

        // 清除倒计时
        function clearCountdown() {
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
            countdown = 0;
           // updateCountdownText();
        }

        // 初始化
        $(function() {
            // 保存按钮原始文本
            $("#sendCodeBtn").data("original-text", $("#sendCodeBtn").text());

            // 表单提交
            $("#registerForm").submit(function(e) {
                e.preventDefault();
/*
                // 获取表单数据
                const formData = {
                    mobile: $("#mobile").val(),
                    code: $("#code").val(),
                    nickname: $("#nickname").val(),
                    password: $("#password").val()
                };*/
/*

                // 前端验证
                if (!/^1[3-9]\d{9}$/.test(formData.mobile)) {
                    message("请输入正确的手机号码");
                    return;
                }
                if (!/^\d{6}$/.test(formData.code)) {
                    message("请输入6位验证码");
                    return;
                }
                if (formData.nickname.length < 2) {
                    message("昵称至少需要2个字符");
                    return;
                }
                if (formData.password.length < 6) {
                    message("密码至少需要6位");
                    return;
                }
*/

                // 提交注册
                $.post("/login/register", formData, function(res) {
                    if (res.success) {
                        message(res.message);
                        setTimeout(function() {
                            window.location.href = "/login/login";
                        }, 1500);
                    } else {
                        message(res.message);
                    }
                }).fail(function() {
                    message("注册失败，请稍后重试");
                });
            });
        });
    </script>
</body>
</html>